import React from 'react';
import { Modal, Transfer } from 'antd'

class ExportConfig extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      allColumns: [],
      selectedColumns: []
    }
  }

  componentDidMount() {
    const { allColumns } = this.props;
    this.setState({
      allColumns
    })
  }

  handleChange = selectedColumns => {
    this.setState({ selectedColumns });
  };

  render() {
    const { visible, onClose } = this.props;
    const { allColumns, selectedColumns } = this.state;
    return (
      <Modal visible={visible}
             onOk={onClose}
             onCancel={onClose}
             okText="导出"
             title="请选择要导出的列">
        <Transfer dataSource={allColumns}
                  showSearch
                  targetKeys={selectedColumns}
                  onChange={this.handleChange}
                  render={item => item.title}
                  rowKey={record => record.dataIndex}
                  listStyle={{
                    height: 400
                  }}/>
      </Modal>
    );
  }
}

ExportConfig.PropTypes = {
  visible: React.PropTypes.bool,
  allColumns: React.PropTypes.array,
  onClose: React.PropTypes.func
};

export default ExportConfig;
